<template>
  <div class="user-analytics">
    <a-row :gutter="[16, 16]">
      <!-- 用户增长趋势 -->
      <a-col :span="24">
        <a-card title="用户增长趋势">
          <a-radio-group v-model:value="timeRange" style="margin-bottom: 16px">
            <a-radio-button value="7">近7天</a-radio-button>
            <a-radio-button value="30">近30天</a-radio-button>
            <a-radio-button value="90">近90天</a-radio-button>
          </a-radio-group>
          <div ref="growthChart" style="height: 300px"></div>
        </a-card>
      </a-col>

      <!-- 用户活跃度 -->
      <a-col :span="12">
        <a-card title="用户活跃度">
          <div ref="activeChart" style="height: 300px"></div>
        </a-card>
      </a-col>

      <!-- 用户留存率 -->
      <a-col :span="12">
        <a-card title="用户留存率">
          <div ref="retentionChart" style="height: 300px"></div>
        </a-card>
      </a-col>

      <!-- 用户行为分析 -->
      <a-col :span="24">
        <a-card title="用户行为分析">
          <a-tabs>
            <a-tab-pane key="reading" tab="阅读行为">
              <div ref="readingBehaviorChart" style="height: 300px"></div>
            </a-tab-pane>
            <a-tab-pane key="social" tab="社交行为">
              <div ref="socialBehaviorChart" style="height: 300px"></div>
            </a-tab-pane>
            <a-tab-pane key="purchase" tab="消费行为">
              <div ref="purchaseBehaviorChart" style="height: 300px"></div>
            </a-tab-pane>
          </a-tabs>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { getUserGrowth, getRetentionRate } from '@/api/analytics'

export default defineComponent({
  name: 'UserAnalytics',
  setup() {
    const timeRange = ref('7')
    const growthChart = ref(null)
    const activeChart = ref(null)
    const retentionChart = ref(null)
    const readingBehaviorChart = ref(null)
    const socialBehaviorChart = ref(null)
    const purchaseBehaviorChart = ref(null)

    onMounted(() => {
      initGrowthChart()
      initActiveChart()
      initRetentionChart()
      initBehaviorCharts()
    })

    const initGrowthChart = () => {
      const chart = echarts.init(growthChart.value)
      chart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth: true
        }]
      })
    }

    // 其他图表初始化方法...

    return {
      timeRange,
      growthChart,
      activeChart,
      retentionChart,
      readingBehaviorChart,
      socialBehaviorChart,
      purchaseBehaviorChart
    }
  }
})
</script>

<style scoped>
.user-analytics {
  padding: 24px;
}
</style> 